<template>
	<view class="page">
		<view class="list">
			<view class="item"
				v-for="(article, article_index) in article.list"
				:key="article.list_key"
			>
				<view class="album__content">
					<view class="line1">
						<view style="width: 500rpx;display: flex;justify-content: space-between;">
							<text>{{article.title}}</text>
							<text>{{$u.timeFormat(timestamp, 'yyyy年mm月dd日')}}</text>
						</view>
						<view style="width: 100rpx;display: flex;">
							<u-button class="list_item_btn" size="mini" @click="goto_article_page(article.id)">查看</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_con">
			<view class="btn" @click="goto_article_page()">添加文章</view>
		</view>
	</view>
</template>
<script>
	import { get_article_list } from '@/util/api/api.js';
	
	export default {
		data() {
			return {
				url: "/index.php/html5/zhenduan/get_zhenduan_list",
				gettokenurl: "/index.php/html5/login/gettoken",
				article:{
					list:[],
					curpage:0
				},
				timestamp:0,
			}
		},
		onLoad() {
			this.get_article_list()
		},
		methods: {
			async get_article_list(curpage=0,listnum=10){
				let that = this
				let data = {
					curpage:curpage,
					listnum:listnum
				}
				
				let res = await get_article_list(data)
				
				if (res.code==200) {
					if(res.data.datalist){
						that.article.list.push(...res.data.datalist)
						that.article.curpage = res.data.pages
						that.article.total = res.data.total
					}
				} else{
					that.showToast(res.message)
				}
			},
			goto_article_page(id){
				let url = '/pages/article/add'
				
				if(id){
					url = url+'?id='+id
				}
				
				uni.navigateTo({url});
			},
		}
	}
</script>
<style>
page{
	height: 100%;
	background: #F5F5F5;
}
.page{
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.list{
	flex: 1;
}
.item{
	padding: 25rpx;
	margin: 25rpx;
	display: flex;
	background: #fff;
}
.album__avatar{
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
}
.album__content{
	width: 100%;
}
.album__content text{
	font-size: 28rpx;
}
.line1{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.list_item_btn{
	width: 100rpx;
	height: 50rpx;
	background-color: #15BBA2;
	color: #fff;
	border-radius: 30rpx;
	margin: 0 10rpx;
}
.btn_con{
	display: flex;
	justify-content: center;
}
.btn_con .btn{
	width: 690rpx;
	height: 88rpx;
	margin: 100rpx auto;
	background: #15BBA2;
	border-radius: 44rpx;
	line-height: 88rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}
</style>